<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/25
  Time: 22:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>打考勤</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
<h1 style="margin-bottom: 20px;">打考勤</h1>
<!-- 表单区+返回按钮 -->
<div style="background: white url('/img/attendance/attendanceBackground.jpg') center;background-size:cover">
    <div class="layui-row" style="padding: 10% 0;text-align: center">
        <div style="display: inline-block;">
            <button id="btn_attendance_type_0" class="layui-btn layui-btn-primary" style="width: 15.625rem; height: 15.625rem;border-radius: 100%;" onclick="makeAttendance(0)">
                <div style="font-size: 3rem;">签到</div>
                <div id="div_attendance_type_0" style="font-size: 18px;display: none">已签到：</div>
            </button>
        </div>
        <div style="display: inline-block">
            <span id="time" style="font-size: 2rem;margin: 0 20px;color: antiquewhite"></span>
        </div>
        <div style="display: inline-block">
            <button id="btn_attendance_type_1" class="layui-btn layui-btn-primary" style="width: 15.625rem; height: 15.625rem;border-radius: 100%;" onclick="makeAttendance(1)">
                <div style="font-size: 3rem;">签退</div>
                <div id="div_attendance_type_1" style="font-size: 18px;display: none">已签退：</div>
            </button>
        </div>
    </div>
</div>
</body>
<script>
    setInterval("time.innerHTML=getCurrTime()",1000);

    layui.use('layer');
    $(function () {
        //页面加载完成，设置时间
        $("#time").html(getCurrTime());
        //页面加载完成，查询今日是否有签到记录
        $.ajax({
            url:'/attendance/getTodayAttendance.do',
            dataType:'json',
            success:function (result) {
                //如果有考勤记录，将记录时间和样式显示在按钮上
                if(result.code == 201){

                    var data = result.data;
                    var len = data.length;
                    for (i = 0; i < len; i++){
                        //考勤类型：0-上班，1-下班
                        var type = data[i].attendance_type;
                        $("#btn_attendance_type_"+type).addClass(data[i].status.theme_skin);
                        $("#div_attendance_type_"+type).append(data[i].attendance_time.split(" ")[1]);
                        $("#div_attendance_type_"+type).show();
                    }
                }
            }
        })
    })
    /**
     * 获取当前时间（格式：上午hh:mm:ss）
     */
    function getCurrTime(){
        var curDate = new Date().toLocaleTimeString();
        return curDate;
    }

    /**
     * 打考勤
     * @param attendance_type 考勤类型：0-上班，1-下班
     */
    function makeAttendance(attendance_type) {

        layui.layer.open({
            title: '考勤提醒',
            content: '确定打考勤吗？',
            btn: ['确定', '取消',],
            yes: function(index, layero){

                location.href = "/attendance/makeAttendance.do?attendance_type="+attendance_type;
            }
        });
    }
</script>
</html>
